<div class="challenge-card">
  <div class="ev-card-panel ev-md-container card-bt-margin">
    <p *ngIf="!isActive"><strong class="fw-light">Sorry, the challenge is not active.</strong></p>
    <div *ngIf="isActive" class="row row-lr-margin">
      <div class="col-md-11 col-sm-11 col-xs-10 col-lr-pad">
        <h5 class="fw-light">Submission Guidelines</h5>
        <div *ngIf="isChallengeHost">
          <div class="fw-light">
            <p class="fs-16">
              <strong>Note: </strong>Your submissions won't be visible on leaderboard for
              <strong class="blue-text"> Public Challenge Phases </strong> since you are a challenge host for this
              challenge.This feature is only for your testing purposes.
            </p>
          </div>
        </div>
        <div [innerHTML]="submissionGuidelines" class="submission-guidelines fw-light fs-16"></div>
      </div>
    </div>
  </div>
  <div *ngIf="challenge.is_docker_based" class="ev-md-container ev-card-panel card-bt-margin">
    <div class="row row-lr-margin">
      <div class="col-lg-12 col-md-12 col-sm-12 col-lr-pad">
        <span class="fs-20 fw-light">
          Submission instructions for docker image using evalai-cli
        </span>
        <ol>
          <li class="content fs-16 fw-light">
            Install evalai-cli<br />
            <code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
            <button
              class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
              value="pip install &quot;evalai{{ cliVersion }}&quot;"
              (click)="copyTextToClipboard(install_evalai)"
            >
              <i
                class="fa fa-clipboard"
                aria-hidden="true"
                alt="Copy to
                clipboard."
              ></i>
            </button>
          </li>
          <li class="content fs-16 fw-light">
            Add your EvalAI account token to evalai-cli<br />
            <code #configure_token>$ evalai set_token {{ authToken }}</code>
            <button
              class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
              value="evalai set_token {{ authToken }}"
              (click)="copyTextToClipboard(configure_token)"
            >
              <i
                class="fa fa-clipboard"
                aria-hidden="true"
                alt="Copy to
                clipboard."
              ></i>
            </button>
          </li>
          <li class="content fs-16 fw-light">
            Push docker image to EvalAI docker registry<br />
            <code #evalai_push>$ evalai push &lt;image&gt;:&lt;tag&gt; --phase &lt;phase_name&gt;</code>
            <button
              class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
              value="evalai push <image>:<tag> --phase <phase_name>"
              (click)="copyTextToClipboard(evalai_push)"
            >
              <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
            </button>
          </li>
          <li class="content fs-16 fw-light">
            For more commands, please refer to
            <a class="text-highlight" href="https://cli.eval.ai/" target="_blank"
              >evalai-cli documentation.</a
            >
          </li>
        </ol>
      </div>
    </div>
  </div>

  <!-- If challenge is docker based -->
  <div *ngIf="challenge.is_docker_based" class="ev-md-container ev-card-panel">
    <span class="fs-20 fw-light"> Submission limits </span><br /><br />
    <span class="fs-16 fw-light">
      <strong class="content">Team name:</strong>
      {{ phaseRemainingSubmissions.participant_team }}
    </span>
    <table align="center" class="centered responsive-table fs-16 fw-light">
      <thead>
        <tr>
          <th class="content">Phase details</th>
          <th class="content">Remaining submissions</th>
          <th class="content">Submission command</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let key of phaseRemainingSubmissions.phases">
          <td class="content">
            {{ key.name }}
            <br />
            <strong class="text-med-black fw-light">Start date: </strong>{{ key.start_date | date: 'medium' }}
            <br />
            <strong class="text-med-black fw-light">End date: </strong>{{ key.end_date | date: 'medium' }}
          </td>
          <td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'showSubmissionDetails'" class="content">
            <strong class="fw-semibold">
              Today:
            </strong>
            {{ key.limits.remaining_submissions_today_count }}<br />
            <strong class="fw-semibold">
              This month:
            </strong>
            {{ key.limits.remaining_submissions_this_month_count }}<br />
            <strong class="fw-semibold">
              Total:
            </strong>
            {{ key.limits.remaining_submissions_count }}
          </td>
          <td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'showClock'" class="content">
            <strong class="fw-light">{{ key.limits.message }}</strong
            ><br />
            Next submission will be available in<br />
            <div>
              <span *ngIf="days != 0">{{ phaseRemainingSubmissionsCountdown[key.id].days }} Days, </span
              >{{ phaseRemainingSubmissionsCountdown[key.id].hours }} hours :
              {{ phaseRemainingSubmissionsCountdown[key.id].minutes }}
              minutes :
              {{ phaseRemainingSubmissionsCountdown[key.id].seconds }} seconds
            </div>
          </td>
          <td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'maxExceeded'" class="content">
            <strong>{{ key.limits.message }}</strong
            ><br />
            <strong>
              {{ key.limits.maxExceededMessage }}
            </strong>
          </td>
          <td>
            <code #submission_command>$ evalai push &lt;image&gt;:&lt;tag&gt; --phase {{ key.slug }}</code>
            <button
              class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
              value="evalai push <image>:<tag> --phase {{ key.slug }}"
              (click)="copyTextToClipboard(submission_command)"
            >
              <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- If challenge is not docker based -->
  <div *ngIf="!challenge.is_docker_based && isActive" class="ev-md-container ev-card-panel z-depth-5 ev-challenge-view ">
      <div class="card-bt-margin ev-panel-title">
        <div class="row row-lr-margin">
          <div class="col s12">
            <h5 class="fw-light">Make Submission</h5>
          </div>
        </div>
    </div>
    <div class="row margin-bottom-cancel">
      <div class="col-md-7 col-sm-7 col-xs-10">
        <div class="exist-team-card">
          <ul>
            <p class="content fs-18">Select phase:</p>
            <app-selectphase
              [phases]="filteredPhases"
              [phaseSelectionListType]="phaseSelectionListType"
              [phaseSelectionType]="phaseSelectionType"
              [phaseSelected]="phaseSelected()"
              (click)="isPhaseSelected = true"
              class="fw-light"
            ></app-selectphase>
            <div [hidden]="!isPhaseSelected" class="row">
              <div id="submission_option_style">
                <p class="content fs-18">Submission Options:</p>
                <span class="submission-option">
                  <input
                    type="radio"
                    name="submissionOptions"
                    class="with-gap selectPhase"
                    id="useCli"
                    (click)="isSubmissionUsingUrl = false;
                    showForm = false; isSubmissionUsingCli=true;" 
                  />
                  <label for="useCli" class="radio-button-text pointer">
                    <div id="radio_button_url" class="show-member-title pointer">
                      <strong class="text-med-black fw-light fs-16"> Use CLI (for file size > 400MB) </strong>
                    </div>
                  </label>
                </span>
                <span class="submission-option">
                  <input type="radio" name="submissionOptions" class="with-gap selectPhase" id="fileUpload"
                    (click)="isSubmissionUsingUrl = false; showForm = true;" />
                  <label for="fileUpload" class="radio-button-text pointer">
                    <div id="radio_button_file" class="show-member-title pointer">
                      <strong class="text-med-black fw-light fs-16">Upload file </strong>
                    </div>
                  </label>
                </span>
              </div>
            </div>
          </ul>
        </div>
      </div>
      <div *ngIf="selectedPhaseSubmissions.showSubmissionDetails" class="col-md-5 col-sm-5 col-xs-12">
        <div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
          <div class="row row-lr-margin">
            <span class="text-med-black fw-semibold fs-16">Today's remaining Submissions:</span>
            <span class="color-black">
              <strong class="fw-light fs-16">
                {{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_today_count }}
              </strong>
            </span>
          </div>
          <div class="row row-lr-margin">
            <span class="text-med-black fw-semibold fs-16">
              Monthly remaining submissions:
            </span>
            <span class="color-black">
              <strong class="fw-light fs-16">
                {{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_this_month_count }}
              </strong>
            </span>
          </div>
          <div class="row row-lr-margin">
            <span class="text-med-black fw-semibold fs-16">
              Total remaining submissions:
            </span>
            <span class="color-black">
              <strong class="fw-light fs-16">
                {{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_count }}
              </strong>
            </span>
          </div>
        </div>
      </div>
      <!-- cli instructions-->
      <div class="col-md-11 col-sm-11 col-xs-10 col-lr-pad cli-card-container">
        <div *ngIf="isSubmissionUsingCli && !showForm">
          <p class="content fs-18">Submission instructions</p>
          <ol class="numbered-list">
            <li class="content fw-light fs-16"> Install evalai-cli<br />
              <code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
              <button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                value="pip install &quot;evalai{{ cliVersion }}&quot;"
                (click)="copyTextToClipboard(install_evalai)">
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
                      clipboard."></i>
              </button>
            </li>
            <li class="cli-code content fw-light fs-16"> Add your EvalAI account token to evalai-cli<br />
              <code #set_token> $ evalai set_token {{authToken}}</code>
              <button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                value="evalai set_token {{ authToken }}" (click)="copyTextToClipboard(set_token)">
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
                      clipboard."></i>
              </button>
            </li>
            <li class="content fw-light fs-16"> Make Submission<br />
              <code
                #make_submission>$ evalai challenge {{challenge.id}} phase {{selectedPhase.id}} submit --file &lt;submission_file_path&gt; --large</code>
              <button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                value="evalai challenge {{challengeId}} phase {{phaseId}} submit --file &lt;submission_file_path&gt; --large"
                (click)="copyTextToClipboard(make_submission)">
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
                      clipboard."></i>
              </button>
            </li>
            <li class="content fw-light fs-16">
              <div class="center-content">Use &nbsp;<code> --private </code> &nbsp;or&nbsp; <code> --public </code>&nbsp; flag in the submission
              command to make the submission private or public respectively.<br />
              </div>
            </li>
            <li class="content fw-light fs-16"> For more commands, please refer to <a class="highlight-link"
                href="https://cli.eval.ai/" target="_blank"><strong>evalai-cli documentation.</strong></a>
            </li>
          </ol>
        </div>
      </div>   
      <!--Submission form-->
      <div [hidden]="!showForm" class="form col-md-7 col-sm-7 col-xs-10 cli-card-container">
        <div class="row row-lr-margin">
          <div class="col-md-10 col-sm-10 col-lr-pad submit-upload-file">
            <div [hidden]="isSubmissionUsingUrl">
              <app-input
                (input)="validateInput($event.target.value)"
                [label]="'input_file'"
                [accept]="'.json, .zip, .txt, .tsv, .gz, .csv, .h5, .npy'"
                [placeholder]="''"
                [type]="'file'"
                [value]="''"
                [message]="inputErrorMessage"
                #formsubmit
              ></app-input>
              <div class="input-message" #textValue [class.hidden]="validFileUrl">{{ inputErrorMessage }}</div>
            </div>
            <div [hidden]="!isSubmissionUsingUrl">
              <app-input
                (input)="validateInput($event.target.value)"
                [label]="'file_url'"
                [placeholder]="'Submission file URL'"
                [type]="'URL'"
                [icon]="''"
                [value]="''"
                [message]="inputErrorMessage"
                #formsubmit
              ></app-input>
            </div>
          </div>
        </div>
        <div class="row row-lr-margin" *ngIf="selectedPhase['leaderboard_public']">
          <div class="align-left col-sm-10 col-lr-pad">
            <p class="fs-14 w-400">Select submission visibility:</p>
            <input 
              type="radio" 
              name="submissionVisibility"
              class="with-gap selectPhase" 
              id="isPublicSubmission"
              (change)="isPublicSubmission = true"
              />
            <label for="isPublicSubmission" class="radio-button-text pointer">
              <div 
                class="show-member-title pointer">
                <strong class="text-med-black fs-16">Public</strong>
              </div>
            </label>
            <div class="clearfix"></div>
            <input type="radio"
              name="submissionVisibility"
              class="with-gap selectPhase"
              id="isPrivateSubmission"
              (change)="isPublicSubmission = false"
              />
            <label for="isPrivateSubmission" class="radio-button-text pointer">
              <div 
                class="show-member-title pointer">
                <strong class="text-med-black fs-16">Private</strong>
              </div>
            </label>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="row row-lr-margin" *ngIf="isAttributeVisible('method_name')">
          <div class="align-left col-sm-10 col-lr-pad">
            <div class="input-field align-left">
              <app-input
                [label]="'method_name'"
                [placeholder]="'Method name (Optional)'"
                [type]="'text'"
                [icon]="''"
                [value]="''"
                #formsubmit
              ></app-input>
            </div>
          </div>
        </div>
        <div class="row row-lr-margin" *ngIf="isAttributeVisible('method_description')">
          <div class="align-left col-sm-10 col-lr-pad">
            <app-input
              [label]="'method_description'"
              [type]="'textarea'"
              [placeholder]="'Method description (Optional)'"
              #formsubmit
            ></app-input
            ><br />
          </div>
        </div>
        <div class="row row-lr-margin" *ngIf="isAttributeVisible('project_url')">
          <div class="align-left col-sm-10 col-lr-pad">
            <app-input
              [label]="'project_url'"
              [type]="'URL'"
              [placeholder]="'Project URL (Optional)'"
              [message]="' '"
              #formsubmit
            ></app-input>
          </div>
        </div>
        <div class="row row-lr-margin" *ngIf="isAttributeVisible('publication_url')">
          <div class="align-left col-sm-10 col-lr-pad">
            <app-input
              [label]="'publication_url'"
              [type]="'URL'"
              [placeholder]="'Publication URL (Optional)'"
              [message]="' '"
              #formsubmit
            ></app-input>
          </div>
        </div>
        <div class="dynamicform" *ngIf="metaAttributesforCurrentSubmission != null">
          <div *ngFor="let attribute of metaAttributesforCurrentSubmission">
            <div class="row row-lr-margin">
              <div *ngIf="attribute.type == 'text'">
                  <div class="align-left col-sm-10 col-lr-pad">
                    <app-input
                      [label]="attribute.name"
                      [type]="'textattribute'"
                      [attributeName]="attribute.name"
                      [attributeDescription]="attribute.description"
                      [attributeRequired]="attribute.required"
                      [message]="' '"
                      #formsubmit
                    ></app-input>
                  </div>
              </div>
              <div *ngIf="attribute.type == 'radio'">
                <div class="row row-lr-margin">
                  <div class="align-left col-sm-10 col-lr-pad">
                    <label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
                    <br>
                    <br>
                    <!-- <div class="input-field"> -->
                      <mat-radio-group [(ngModel)]="attribute.value" id="{{ attribute.name }}" name="{{ attribute.name }}">
                        <div *ngFor="let option of attribute.options">
                          <mat-radio-button class="element"  [value]="option">
                            <label class="fs-16 element">{{ option }}</label>
                          </mat-radio-button>
                          <br/>
                        </div>
                      </mat-radio-group>
                    <!-- </div> -->
                  </div>
                </div>
              </div>
              <div *ngIf="attribute.type == 'checkbox'">
                <div class="row row-lr-margin">
                  <div class="align-left col-sm-10 col-lr-pad">
                    <label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
                    <br>
                    <br>
                    <div *ngFor="let option of attribute.options">
                      <mat-checkbox
                        (change)="toggleSelection(attribute, option)"
                        id="{{ option }}"
                        [value]="option"
                      >
                        <label class="fs-16 element" for="{{ option }}">{{ option }}</label>
                      </mat-checkbox>
                      <br/>
                    </div>
                  </div>
                </div>
              </div>
              <div *ngIf="attribute.type == 'boolean'">
                <div class="row row-lr-margin">
                  <div class="align-left col-sm-10 col-lr-pad">
                    <label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
                    <br>
                    <br>
                    <mat-radio-group [(ngModel)]="attribute.value" name="{{ attribute.name }}">
                      <mat-radio-button class="element" [value]="'True'"
                        ><label class="fs-16">True</label></mat-radio-button
                      >
                      <br />
                      <mat-radio-button class="element" [value]="'False'"
                        ><label class="fs-16">False</label></mat-radio-button
                      >
                    </mat-radio-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div *ngIf="submissionError" class="red-text col-lr-pad">
          <strong class="fw-semibold">{{ submissionError }}</strong
          ><br /><br />
        </div>
        <div class="pagination">
          <div class="row rm-gut row-lr-margin">
            <div class="col-sm-12 col-md-12 col-lr-pad">
              <div class="align-left">
                <button
                  class="btn btn-waves-effect grad-btn waves-dark ev-btn-dark grad-btn-dark fw-light fs-14"
                  (click)="formValidate()"
                >
                  Submit
                </button>
              </div>
              <br /><br />
            </div>
          </div>
        </div>
      </div>

      <div *ngIf="selectedPhaseSubmissions.maxExceeded" class="col-md-5 col-sm-4 col-xs-12">
        <div class="ev-submission-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
          <div class="row row-lr-margin">
            <span class="color-black">
              <strong class="fw-light fs-16 red-text">
                {{ selectedPhaseSubmissions.maxExceededMessage }}
              </strong>
            </span>
          </div>
        </div>
      </div>
      <div *ngIf="selectedPhaseSubmissions.showClock" class="col-md-5 col-sm-12 col-xs-12">
        <div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
          <div class="row row-lr-margin">
            <strong class="fw-regular text-med-black">
              Message:
            </strong>
            {{ selectedPhaseSubmissions.clockMessage.message }}
          </div>
          <div class="fw-regular">
            Next set of submissions will be available after:
          </div>
          <div>
            <span *ngIf="days != 0">{{ days }} Days, </span>{{ hours }} hours : {{ minutes }} minutes :
            {{ seconds }} seconds
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
